<template>
    <div>
      <div style="display: flex; justify-content: flex-start">
        <el-input
          placeholder="档案号/姓名"
          v-model="page.searchObj.query"
          autofocus
          style="width: 230px; margin-right: 30px"
          clearable
          ><i slot="prefix" class="el-input__icon el-icon-search"></i
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="query">搜索</el-button>
      </div>
      <el-button
        type="primary"
        style="display: flex; justify-content: flex-start; margin: 10px 0"
        >新增角色</el-button
      >
      <el-table :data="tableData" style="width: 100%" height="65vh">
          <el-table-column
        type="selection"
        width="55">
      </el-table-column>
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="describe" label="描述"> </el-table-column>
        <el-table-column prop="state" label="状态">
        <template slot-scope="value">
          <span>
            <el-switch
              style="display: block"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              v-model="value.row.state"
              :active-value="0"
              inactive-value="1"
              @change="updateState(value.row)"
            >
            </el-switch>
          </span>
        </template>
      </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="">
            <span>
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[5,10]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        page: {
          //分页查询条件
          pageNum: 1, //当前页
          pageSize: 5, //页面数量
          searchObj: {
            //条件对象
            query: "", //档案号/姓名
          },
        },
        tableData: [],
        total:0 ,
      };
    },
    created(){
      this.queryRoleAll();
    },
    methods: {
      handleSizeChange(val) {
        this.page.pageSize=val;
        this.queryRoleAll();
      },
      handleCurrentChange(val) {
        this.page.pageNum=val;
        this.queryRoleAll();
      },
      //条件查询
      query(){
        this.queryUserAll();
      },
      //   查询所有角色
      queryRoleAll(){
          this.axios.post("/api/hj/queryRoleAll",this.page)
          .then(result=>{
              this.total = result.data.total;
              this.tableData = result.data.list;
          })
      },
      // 修改状态
    state(id, state) {
      this.axios
        .get("/api/hj/updateRoleState", {
          params: {
            id: id,
            state: state,
          },
        })
        .then((result) => {
          this.searchQueryMember();
        });
    },
    updateState(obj) {
      // 0表示启用 1表示禁用
      if (obj.state > 0) {
        this.state(obj.id,1);
      } else {
        this.state(obj.id,0);
      }
    },
    },
  };
  </script>
  
  <style>
  </style>